<!-- TableList表格组件
 Table表格 -->
<template>
  <div class="table_list_fix">
    <!-- 扩展性内容 -->
    <slot name="content_context"></slot>

    <!-- table中间button eg:导出 -->
    <div v-if="extendButton && extendButton.length > 0" class="btn-operates">
      <a :key="index" :href="item.href || null" @click="item.method()" v-for="(item, index) in extendButton">
        <el-button  type="primary">{{ item.title }}</el-button>
      </a>
    </div>

    <!-- table表格 -->
    <el-table
      
      v-bind="options"
      :border="border"
      :data="dataSource"
      v-loading="loading"
      v-on="tableEvents"
      ref="multipleTable"
      style="width: 100%;"
      :header-cell-style="{ background: '#F5F7FA' }"
      @selection-change="handleSelectionChange"
    >
      <!-- 复选框 -->
      <el-table-column
        type="selection"
        style="width: 55px;"
        v-if="options && options.selection && (!options.isShow || options.isShow())"
      />

      <el-table-column
        width="55"
        align="center"
        type="index"
        v-if="options && options.index"
        :label="options && options.labelIndex"
      />

      <!-- 表格数据 -->
      <template v-for="(column, index) in columns">
        <el-table-column
          :key="index"
          v-bind="column.props"
          :prop="column.prop"
          :label="column.label"
          :align="column.align"
          :width="column.width"
          show-overflow-tooltip
          v-if="!column.isShow || (column.isShow && column.isShow())"
        >
          <template slot-scope="scope">
            <template v-if="!column.render">
              <template v-if="column.formatter">
                <span
                  v-html="column.formatter(scope.row, column, scope.$index)"
                  @click="column.click && column.click(scope.row, scope.$index)"
                ></span>
              </template>
              
              <!-- 跳转操作 -->
              <template v-else-if="column.newjump">
                <router-link
                  class="newjump"
                  v-bind="{ target: '_blank', ...column.target }"
                  :to="column.newjump(scope.row, column, scope.$index)"
                  >{{ scope.row[column.prop] || column.content }}</router-link
                >
              </template>
              
			  <!-- slot插槽 -->
              <template v-else-if="column.slot">
                <slot :slotName="column.slot" :row="scope.row" :index="index" />
              </template>
			
			  <!-- 操作按钮 -->
              <template v-else-if="column.children">
                <template v-for="(btn, key) in column.children">
                  <span :key="key" v-if="!btn.isShow || (btn.isShow && btn.isShow(scope.row, scope.$index))">
                    <el-button
                      :icon="btn.icon"
                      :plain="btn.plain"
                      style="padding: 6px"
                      :loading="scope.row?loading:''"
                      :size="btn.size || 'small'"
                      :type="btn.type?btn.type : 'primary'"
                      :disabled="btn.disabled && btn.disabled(scope.row, scope.$index)"
                      @click="btn.method(scope.row, scope.$index)"
                      >{{ btn.label }}</el-button
                    >
                  </span>
                </template>
              </template>

              <template v-else>
                <span
                  :style="column.click ? 'color: #409EFF; cursor: pointer;' : null"
                  @click="column.click && column.click(scope.row, scope.$index)"
                >
                  {{ scope.row[column.prop] || column.content }}
                  {{ `${scope.row[column.prop] && column.unit ? column.unit : ''}` }}
                </span>
              </template>
              
            </template>
            
            <template v-else>
              <render :column="column" :row="scope.row" :render="column.render" :index="index"></render>
            </template>
            
          </template>
        </el-table-column>
      </template>
    </el-table>
    <br />
    <!-- 分页部分 -->
    <el-pagination
      background
      v-if="pagination"
      :total="dataTotal"
      @size-change="handleSizeChange"
      :page-sizes="[5, 10, 20, 30, 50, 100]"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      @current-change="handleChangePage"
      :class="options && options.pageExtendLayout ? '' : 'pagination'"
      :layout="options && options.pageExtendLayout || 'total, prev, pager, next'"
    />
  </div>
</template>

<script>
const methods = {
  // 复选框选中项
  handleSelectionChange(val) {
    this.multipleSelection = val;
    this.$emit('handleSelectionChange', Array.from(val));
  },

  // 改变分页触发事件
  handleChangePage(val) {
    this.$emit('current-change', val);
  },

  handleSizeChange(page) {
    this.$emit('size-change', page);
  }
};

export default {
  name: 'TableList',
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    border: {
      type: Boolean,
      default: () => false
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    slotcontent: {
      type: Boolean,
      default: () => false
    },
    dataTotal: {
      type: Number,
      default: 0
    },
    operates: Array,
    pagination: Object,
    extendButton: Array,
    options: Object,
    tableEvents: Object
  },

  data() {
    return {
      multipleSelection: []
    };
  },

  methods,

  mounted() {
    this.$nextTick(() => {
      this.$emit('toggleRowSelection', this.$refs.multipleTable);
    });
  },

  components: {
    render: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, opt) => {
        const params = {
          row: opt.props.row,
          index: opt.props.index
        };
        if (opt.props.column) params.column = opt.props.column;
        return opt.props.render(h, params);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.table_list_fix {
  overflow: hidden;
  .btn-operates {
    margin-bottom: 6px;
    a {
      color: #fff;
      text-decoration: none;
      display: inline-block;
    }
  }
}
.table-header {
  padding-top: 10px;
  .table-header_button {
    text-align: right;
    float: right;
    margin-bottom: 12px;
    line-height: 40px;
  }
}
.newjump {
  text-decoration: none;
  color: dodgerblue;
}
.pagination {
  text-align: end;
  padding-bottom: 15px;
}
</style>
